import common from '../BaseComponent'

import './textmorebutton.scss'
class TextMoreButton extends common { 
    constructor(options) { 
        super(options)
        const defaultOptions = {
            color: 'blue',
            text: '点击查看更多',
            element: '',
            type:'article',
            default: '查看更多',
            url:''
        }
        this.options = Object.assign(defaultOptions, options)
        this.$container = this.options.element
        this.initContent()
    }
    initContent() { 
        //  给原本的类，再加一个类
        this.$container.classList.add('click-button')
      
            //  创建一个渐变盒子
        const $gradientBox = this.createDiv('gradient-box')
 
        let $button =null
            // 如果类型 是文章，则在渐变盒子 添加箭头,
        if (this.options.type == "article") {
        // 创建按钮
            $button = this.createDiv('click-button-title', this.options.default)
            
            this.$container.addEventListener('click', () => { 
                var content = document.querySelector('.content')
                content.classList.add('content-open')
                $buttonBox.removeChild($gradientBox)
                $button.innerHTML=this.options.text
                $button.addEventListener('click', () => { 
                        this.options.callback.call(this)
                     this.jump(this.options.url)
                })
            })
            const $arrow = this.createDiv('gradient-box-arrow')
            $arrow.addEventListener('click', () => {
                this.options.callback.call(this)
            })
            $gradientBox.appendChild($arrow)
        }
        // 如果是评论的话，按钮之后再加上一个箭头
         
        if (this.options.type == "comment") { 
            $button = this.createDiv('click-button-title', this.options.text)
            $button.classList.add('click-button-icon')
            $button.addEventListener('click', () => { 
                this.options.callback.call(this)
                this.jump(this.options.url)
           })
        }

        // 创建一个大盒子
        const $buttonBox = this.createDiv('button-Box')
        // 给按钮button 添加样式
        if (this.options.color == "red") {
            this.$container.classList.add('click-button-red')
         }
        else { 
            his.$container.classList.add('click-button-blue')
        }
        $buttonBox.appendChild($gradientBox)
        $buttonBox.appendChild($button)
        let $fragments = document.createDocumentFragment()
        $fragments.appendChild($buttonBox)
        this.$container.appendChild($fragments)
    }
    
}

export default TextMoreButton